<template>
  <f7-page class="center-body5">
    <f7-block class="header">
      <!-- 头像 -->
      <f7-list class="my-name">
        <f7-list-item class="my-news" link="/ui/center/index2">
          <img
            src="static/img/center/man-png.png"
            alt=""
            class="portrait"
            v-if="user.profile.gender === 0"
          />
          <img
            src="static/img/center/woman.png"
            alt=""
            class="portrait"
            v-else
          />
          <!-- 名字个信息 -->
          <f7-nav-title class="my-name2">
            <f7-block-title class="name">{{ user.userName }}</f7-block-title>
            <f7-block class="my-id">{{ user.profile.position }}</f7-block>
          </f7-nav-title>
        </f7-list-item>
      </f7-list>
      <!-- 发布 草稿 收藏 浏览 -->
      <f7-col class="header-order">
        <ul>
          <li>
            <div class="header-order-title">12</div>
            发布
          </li>
          <li>
            <div class="header-order-title">1</div>
            草稿
          </li>
          <li>
            <div class="header-order-title">18</div>
            收藏
          </li>
          <li>
            <div class="header-order-title">34</div>
            浏览历史
          </li>
        </ul>
      </f7-col>
      <!-- 我的钱包 -->
      <f7-card class="header-appointment">
        <qm-block title="我的钱包" :titleSize="32" :needpadding="false">
          <div class="qm-entry">
            <qm-entry
              v-for="(item, index) in news"
              :key="index"
              :data="item"
              iconWidth="64"
            ></qm-entry>
          </div>
        </qm-block>
      </f7-card>
      <!-- 常用功能 -->
      <f7-card class="header-appointment">
        <qm-block title="常用功能" :titleSize="32" :needpadding="false">
          <div class="qm-entry">
            <qm-entry
              v-for="(item, index) in list"
              :key="index"
              :data="item"
              iconWidth="48"
            ></qm-entry>
          </div>
        </qm-block>
      </f7-card>
      <!-- 其他功能 -->
      <f7-card class="header-appointment">
        <qm-block title="其他功能" :titleSize="32" :needpadding="false">
          <div class="qm-entry">
            <qm-entry
              v-for="(item, index) in list2"
              :key="index"
              :data="item"
              iconWidth="48"
            ></qm-entry>
          </div>
        </qm-block>
      </f7-card>
      <div style="width: 100%; height: 60px"></div>
    </f7-block>
    <!-- 底部导航栏 -->
    <!-- <f7-toolbar bottom class="footer"> -->
    <f7-viewbar-instince slot="fixed" ></f7-viewbar-instince>
    <!-- </f7-toolbar> -->
  </f7-page>
</template>

<script>
import controller from "../../../libs/framework/controller";
export default class instance extends controller {
  async getViewModel() {
    let user = await this.$framework.account.getUser();
    this.bind({ user: user });
  }
  mixin() {
    return {
      data() {
        return {
          news: [
            {
              image: "static/img/center/index5/icon-me-fangke.svg",
              title: "访客预约",
            },
            {
              image: "static/img/center/index5/icon-me-huiyishi.svg",
              title: "会议室预约",
            },
            {
              image: "static/img/center/index5/icon-me-yaoyue.svg",
              title: "访客邀约",
            },
            {
              image: "static/img/center/index5/icon-me-fankui.svg",
              title: "反馈记录",
            },
          ],
          list: [
            {
              image: "static/img/center/index5/icon-me-shoucang.svg",
              title: "收藏",
              href: "/ui/center/index4",
            },
            {
              image: "static/img/center/index5/icon-me-daiban.svg",
              title: "待办事项",
              href: "/ui/center/index4",
            },
            {
              image: "static/img/center/index5/icon-me-xiaoxi.svg",
              title: "我的消息",
              href: "/ui/notice/index4",
            },
            {
              image: "static/img/center/index5/icon-me-wuye.svg",
              title: "物业管理",
              href: "/ui/center/index4",
            },
            {
              image: "static/img/center/index5/icon-me-shouji.svg",
              title: "绑定手机",
              href: "/setting/profile",
            },
            {
              image: "static/img/center/index5/icon-me-shezhi.svg",
              title: "设置",
              href: "/ui/set/index",
            },
            {
              image: "static/img/center/index5/icon-me-mima.svg",
              title: "修改密码",
              href: "/setting/editPassword",
            },
            {
              image: "static/img/center/index5/icon-me-dizhi.svg",
              title: "我的签名",
              href: "/setting/sign",
            },
          ],
          list2: [
            {
              image: "static/img/center/index5/icon-me-kefu.svg",
              title: "客服中心",
              href: "/ui/center/index4",
            },
            {
              image: "static/img/center/index5/icon-me-yijian.svg",
              title: "意见反馈",
              href: "/setting/feedback",
            },
            {
              image: "static/img/center/index5/icon-me-wenti.svg",
              title: "常见问题",
              href: "/setting/rule",
            },
            {
              image: "static/img/center/index5/icon-me-guanyu.svg",
              title: "关于我们",
              href: "/setting/about",
            },
          ],
          links: [
            {
              text: "消息",
              icon: "ellipses_bubble",
              class: "home",
              // href: "/business/index/",
              href: "/ui/home/index",
              tabLinkActive: true,
            },
            {
              text: "通讯录",
              icon: "doc_plaintext",
              class: "component",
              href: "/ui/notice/index4/",
              tabLinkActive: false,
            },
            {
              text: "工作",
              icon: "square_grid_2x2_fill",
              class: "person",
              href: "/ui/function-entrance/index",
              tabLinkActive: false,
            },
            {
              text: "我的",
              icon: "person_alt",
              class: "person",
              href: "/ui/center/index5",
              tabLinkActive: false,
            },
          ],
        };
      },
    };
  }
}
</script>

<style lang="less" scoped>

.center-body5 {
  --f7-list-bg-color: transparent;
  background-color: var(--color-fill-background);
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--color-fill-background);
  .header {
    margin: 0px;
    background: url("../../../../static/img/center/index5/icon-nav-me1.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: inherit;
    width: 100%;
    height: calc(499px * var(--ratio));
    padding: 0px;
    // 头像
    .my-name {
      margin-bottom: calc(50px * var(--ratio));
      padding-top: calc(48px * var(--ratio));
      justify-content: space-between;
      text-align: center;
      margin: 0px;
      /deep/ .item-inner{
      justify-content: flex-start;
      }
      .item-inner:before {
        color: #546986;
        font-size: 19px;
      }
      ul::before {
        display: none;
      }

      ul {
        background: #fff0;
      }

      ul::after {
        display: none;
      }

      .my-news {
        --f7-list-item-padding-vertical: 0px;
        display: flex;
        text-align: left;

       /deep/ .item-link {
          width: 100%;

        /deep/  .item-inner {
            justify-content: flex-start;
          }
        }

        .portrait {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }

        .my-name2 {
          margin-left: calc(22px * var(--ratio));

          .name {
            font-size: calc(44px * var(--ratio));
            color: #2a436b;
            font-weight: 600;
            margin: 0px;
            padding: 0px;
            line-height: 32px;
          }

          .my-id {
            font-size: var(--font-size-subcontent-2);
            color: #546986;
            margin: 0px;
            padding: 0px;
          }
        }
      }

      .f7-icons {
        font-size: 15px;
        line-height: 50px;
        width: 50px;
      }
    }

    //  发布 草稿 搜藏 浏览
    .header-order {
      margin-top: calc(50px * var(--ratio));

      ul {
        display: flex;
        justify-content: space-around;
        text-align: center;
        line-height: 23px;
        color: var(--color-text-title);
        font-size: var(--font-size-subcontent-2);

        .header-order-title {
          flex: 0 0 25%;
          font-size: calc(36px * var(--ratio));
          color: var(--color-text-title);
          font-weight: 600;
        }
      }
    }

    .header-appointment {
      --f7-card-margin-vertical: calc(32px * var(--ratio))
        calc(32px * var(--ratio)) calc(20px * var(--ratio));
      --f7-card-margin-horizontal: calc(32px * var(--ratio));
      --f7-card-bg-color: var(--color-fill-grey-inverse);
      --f7-card-box-shadow: 0px;
      border-radius: 7px;
      margin-top: calc(32px * var(--ratio));
      .qm-entry {
        // padding :calc(32px * var(--ratio)) 0px;
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-row-gap: calc(36px * var(--ratio));
        justify-content: space-between;
      }
      .common-functions {
        font-size: var(--font-size-subtitle);
        line-height: 19px;
        color: var(--color-text-title);
        margin-top: 16px;
        padding: 16px 0px 0px 14px;
        font-weight: 500;
        margin: 0px;
      }

      .third-ul {
        margin-top: calc(40px * var(--ratio));

        ul {
          display: flex;
          justify-content: space-around;
          text-align: center;
          flex-flow: row wrap;

          li {
            flex: 0 0 25%;
            margin-bottom: calc(36px * var(--ratio));
            font-size: var(--font-size-subcontent-2);

            img {
              width: 21px;
              height: 21px;
            }
          }
        }
      }
    }
  }

  .footer::after {
    background: var(--color-fill-grey-inverse);
    box-shadow: 4px -1px 12px 3px #0000000a;
  }
}
</style>
